<template>
	<div class="train">
		<trainHeader name="订单信息"></trainHeader>
		<div class="trainOrderDetail_orderNum" v-if="message">
			<div v-if="message.ticketNo">
				取票码：{{message.ticketNo}}
			</div>
			<div v-if="message.order_num">
				订单号：{{message.order_num}}
			</div>
		</div>
		<!--车次详情-->
		<trainlistdetails :msg="message" :departureDate="message.departureDate" v-if="message"></trainlistdetails>
		<!--乘客-->
		<div class="trainOccupyingSeat_passengers" v-if="message">
			<div v-for="item in message.passengers" class="trainOccupyingSeat_passenger" :class="{'active':!item.seatNo}">
				<div>
					<div class="trainOccupyingSeat_name">
						<span>{{item.passengerName}}</span>
						<em v-if="item.passengerType == 2" class="child">儿童票</em>
						<em v-if="item.passengerType == 3">学生票</em>
					</div>
					<div class="color">￥{{item.ticketPrice}}</div>
				</div>
				<div class="trainOccupyingSeat_seatClassName" v-if="item.seatNo">
					<span>{{item.seatClassName}}</span>
					<span>{{item.seatNo}}</span>
				</div>
				<div>
					<div class="color font">
						{{item.os}}
					</div>
					<div class="trainOrderDetail_btn">
						<div v-if="item.change" :class="{active:item.change == 2}" @click="eventChange(item)">改签</div>
						<div v-if="item.refund" :class="{active:item.refund == 2}" @click="eventRefund(item)">退票</div>
						<div v-if="item.again" :class="{active:item.again == 2}" @click="eventAgain(item)">重新预订</div>
					</div>
				</div>
				<div class="trainOccupyingSeat_circle left"></div>
				<div class="trainOccupyingSeat_circle right"></div>
			</div>
		</div>
		<!--抢票任务-->
		<div v-if="message">
			<div class="trainPay_rob_task" v-if="message.multiTicketTime || message.multiTrainNo || message.multiSeatClass">
				<div class="trainPay_rob_content">
					<div class="trainPay_rob_header">
						抢票任务
					</div>
					<div class="trainPay_rob_message">
						<div v-if="message.multiTicketTime">
							<span class="trainPay_rob_title">备选日期</span>
							<span class="trainPay_rob_content_message">{{message.multiTicketTime | multiTicketTime}}</span>
						</div>
						<div v-if="message.multiTrainNo">
							<span class="trainPay_rob_title">备选车次</span>
							<span class="trainPay_rob_content_message">{{message.multiTrainNo | multiTrainNo}}</span>
						</div>
						<div v-if="message.multiSeatClass">
							<span class="trainPay_rob_title">备选坐席</span>
							<span class="trainPay_rob_content_message">{{message.multiSeatClass | multiSeatClass}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--退票弹框-->
		<div class="trainOrderDetail_refund" v-if="isRefundFlag" @click="cancelRefund">
			<div class="trainOrderDetail_refund_content" @click.stop>
				<div class="trainOrderDetail_refund_message">
					<div>
						<span>车票金额</span>
						<span>{{refundMessage.ticketPrice}}元</span>
					</div>
					<div>
						<span>应退金额</span>
						<span>{{refundMessage.yTMoney}}元</span>
					</div>
					<div v-if="refundMessage.refundFee">
						<span>手续费</span>
						<span class="color">-{{refundMessage.refundFee}}元</span>
					</div>
					<div v-if="refundMessage.youhuiFee">
						<span>使用优惠</span>
						<span class="color">{{refundMessage.youhuiFee}}元</span>
					</div>
					<div>
						<span>实际应退</span>
						<span class="active">{{refundMessage.refundPrice}}元</span>
					</div>
					<div v-if="ticketType" class="trainOrderDetail_refund_tip">
						提示：抢票手续费不退
					</div>
				</div>
				<div class="trainOrderDetail_refund_button">
					<div @click.stop="cancelRefund">
						点错了
					</div>
					<div class="trainOrderDetail_refund_confirm" @click.stop="confirmRefund">
						确定
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	
	.trainOrderDetail_orderNum {
		padding-top: 37px;
		padding-left: 27px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 28px;
		color: #333333;
	}
	
	.trainOrderDetail_orderNum > div {
		margin-bottom: 17px;
	}
	
	.trainOrderDetail_orderNum > div:last-child {
		margin-bottom: 0;
	}
	
	.trainOccupyingSeat_passengers {
		padding: 0 16px;
		padding-bottom: 50px;
	}
	
	.trainOccupyingSeat_passenger {
		background: #fff;
		height: 220px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 0 30px;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 10px;
		border-bottom: 2px dashed #b7b7b7;
	}
	
	.trainOccupyingSeat_passenger.active {
		height: 168px;
	}
	
	.trainOccupyingSeat_passenger:last-child {
		border: 0;
	}
	
	.trainOccupyingSeat_passenger>div {
		display: flex;
		justify-content: space-between;
		font-size: 32px;
		color: #333;
	}
	
	.trainOccupyingSeat_passenger>.trainOccupyingSeat_seatClassName {
		justify-content: flex-start;
		font-size: 28px;
	}
	
	.trainOccupyingSeat_passenger>.trainOccupyingSeat_seatClassName>span {
		margin-right: 15px;
	}
	
	.trainOccupyingSeat_passenger .color {
		font-size: 30px;
		color: #fb6523;
	}
	
	.trainOccupyingSeat_passenger .color.font {
		font-size: 28px;
	}
	
	.trainOccupyingSeat_circle {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #F4F5F9;
		position: absolute;
		top: -13px;
	}
	
	.trainOccupyingSeat_circle.left {
		left: -13px;
	}
	
	.trainOccupyingSeat_circle.right {
		right: -13px;
	}
	
	.trainOccupyingSeat_name {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainOccupyingSeat_name>em {
		font-size: 24px;
		color: #fb6523;
		width: 94px;
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffc2a7;
		font-weight: 700;
		margin-left: 20px;
	}
	
	.trainOccupyingSeat_name>em.child {
		color: #ffffff;
		background-color: #f7c413;
	}
	
	.trainPay_rob_tip {
		font-size: 28px;
		color: #fb6523;
		padding: 19px 38px;
		background-color: rgba(255, 208, 187, 0.5);
		line-height: 40px;
	}
	
	.trainPay_rob_time {
		width: 100%;
		padding: 15px 38px;
		box-sizing: border-box;
		font-size: 26px;
		color: #fb6523;
		padding-bottom: 0;
	}
	
	.trainPay_rob_time span {
		color: #333;
	}
	
	.trainPay_rob_task {
		padding: 19px 15px 46px;
	}
	
	.trainPay_rob_content {
		width: 718px;
		/*height: 389px;*/
		background-color: #ffffff;
		border-radius: 10px;
	}
	
	.trainPay_rob_header {
		font-size: 30px;
		color: #333333;
		padding-left: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 77px;
		border-bottom: 2px solid #e1e1e1;
	}
	
	.trainPay_rob_message {
		padding: 0px 30px;
		width: 100%;
		box-sizing: border-box;
	}
	
	.trainPay_rob_message>div {
		padding: 41px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30px;
		color: #333333;
	}
	
	.trainPay_rob_message>div>span {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 100%;
	}
	
	.trainPay_rob_message>div>.trainPay_rob_title {
		font-size: 30px;
		color: #8a8a8a;
		width: 20%;
	}
	
	.trainPay_rob_content_message {
		width: 70%;
		word-wrap: break-word;
		white-space: pre-wrap;
		line-height: 50px;
	}
	
	.trainOrderDetail_btn {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28px;
		color: #3dd3c5;
	}
	
	.trainOrderDetail_btn>div {
		margin-right: 40px;
	}
	
	.trainOrderDetail_btn>div:last-child {
		margin-right: 0px;
	}
	
	.trainOrderDetail_btn>div.active {
		color: #b6b6b6;
	}
	
	.trainOrderDetail_refund {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,0.75);
		z-index: 300;
	}
	
	.trainOrderDetail_refund_content {
		width: 650px;
		background: #fff;
		border-radius: 20px;
		/*height: 465px;*/
	}
	
	.trainOrderDetail_refund_message {
		padding: 40px;
	}
	
	.trainOrderDetail_refund_message > div {
		font-size: 32px;
		color: #444444;
		line-height: 60px;
		display: flex;
		justify-content: space-between;
	}
	
	.trainOrderDetail_refund_message > div > .color {
		color: #fb6523;
	}
	
	.trainOrderDetail_refund_message > div > .actvie {
		color: #000000;
	}
	
	.trainOrderDetail_refund_button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 95px;
		width: 100%;
		font-size: 36px;
		color: #333333;
		border-top: 2px solid #EBEBEB;
	}
	
	.trainOrderDetail_refund_button > div {
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.trainOrderDetail_refund_button > .trainOrderDetail_refund_confirm {
		background: #43BFA4;
		color: #fff;
		border-radius: 0 0 20px 0;
	}
	
	.trainOrderDetail_refund_message > div.trainOrderDetail_refund_tip {
		color: red;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	import trainlistdetails from "../../../components/trainListDetails"; //详情
	export default {
		name: "trainOrderDetail",
		data() { //数据
			return {
				message: null, //信息
				departureDate: "", //日期
				orderNum: "", //订单号
				orderType: "", //订单类型
				ticketType: "", //车票类型
				isRefundFlag:false,//退票弹窗
				refundMessage:null,//退票信息
				refundItem:null,//退票选中的乘客信息
			}
		},
		mounted() {
			this.orderNum = this.$route.query.orderNum || ""; //订单号
			this.orderType = this.$route.query.orderType || "3"; //订单类型
			this.ticketType = (this.orderType == "3") ? 0 : 1; //抢票判断
			this.getOrder(); //获取订单详情
//			this.wxOrderQuery();
		},
		created() {
			
		},
		methods: {
			getOrder() { //获取订单详情
				var param = {
					orderNum: this.orderNum,
					orderType: this.orderType
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/localOrderDetail", param).then((res) => {
					this.$loading.hide();
					//console.log(res.data);
					if(res.data.Code == "0") {
						var message = res.data.Result.trainOrderDetailInfo;
						var key = [];//存放儿童索引
						message.passengers.forEach((val,index) => {
							((val.ticketStateCode == "Y") && (val.passengerType == 1)) && (key.push(index)); //成人改签儿童改变状态
							val.os = this.filterOrderStatus(message, val); //处理订单信息
							((message.cancel_status == 1) && (val.orderStateCode == "S" || val.orderStateCode == "D")) && (message.passengers[index].orderState = "取消中"); //擎牛兼容
						}, this);
						(key.length) && key.forEach((val) => { //成人改签儿童改变状态
							message.passengers.forEach((item, index) => {
								if(((item.passengerType == 2) && (item.idCard == message.passengers[val].idCard)) && (item.ticketStateCode != "Y")) {
									message.passengers[index].ticketState = message.passengers[val].ticketState;
									message.passengers[index].ticketStateCode = message.passengers[val].ticketStateCode;
								};
							});
						});
						this.getTraiMessage(message); //单车次查询
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function() {
							clearTimeout(timer);
							this.$router.go(-1);
						}.bind(this), 2000);
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getTraiMessage(message) { //单车次查询
				var param = {
					trainNo: message.trainNo,
					trainDate: message.trainDate.split(" ")[0].replace(/-/g, ''),
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/trainNo", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						message.fromPassType = (res.data.Result.fromStation == message.fromStation) ? 0 : 1; //始发站
						message.toPassType = (res.data.Result.toStation == message.toStation) ? 0 : 1; //终点站	
						this.message = message;
						this.getDepartureDate(); //处理组件所需时间数据
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function() {
							clearTimeout(timer);
							this.$router.go(-1);
						}.bind(this), 2000);
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getDepartureDate() { //处理时间信息 搭建组件所需数据
				this.$loading.show();
				this.message.startDate = this.$publicMethod.getWeek(this.message.departureTime);
				this.message.endDate = this.$publicMethod.getWeek(this.message.arrivalTime);
				this.message.fromTime = this.message.startDate.time;
				this.message.toTime = this.message.endDate.time;
				this.message.departureDate = this.message.trainDate;
				var runTimeSpan = new Date(this.message.arrivalTime.replace(/-/g, "/")).getTime() - new Date(this.message.departureTime.replace(/-/g, "/")).getTime();
				this.message.runTimeSpan = runTimeSpan / (1000 * 60);
				this.$loading.hide();
			},
			filterOrderStatus(message, val) { //3是普通 7是抢票  zhan占座中  pay去支付
//				console.log(JSON.parse(JSON.stringify(message)),JSON.parse(JSON.stringify(val)));
				var code = val.ticketStateCode; //订单状态
				val.change = 0; //改签 0隐藏  1展示  2置灰
				val.refund = 0; //退票
				val.again = 0; ///重新预订
				if(code == "N" && (message.orderStateCode == "N" || message.orderStateCode == "S" || message.orderStateCode == "D")) {
					var str = "占座成功";
					(message.cancel_status == 1) && (str = "取消中");
					(message.cancel_status == 2) && (str = "已取消");
					return str;
				} else if(code == "N") {
					val.again = 1; ///重新预订
					return message.orderState;
				} else if(code == "B") {
					val.again = 1; ///重新预订
					return "订单已取消";
				} else if (code == "C"){
					return val.ticketState;
				} else if(code == "T") {
					val.again = 1; ///重新预订
					return "已退票";
				} else if(code == "G" || code == "E") { //儿童不能独自改签
					(val.passengerType == 2) || (val.change = 2); //改签
					val.refund = 2; //退票
					return "已改签";
				} else if(code == "U") {
					return "退票中";
				} else if(code == "O") {
					val.again = 1; ///重新预订
					return "订单已过期";
				} else if(code == "F") {
					var flag = new Date(message.departureTime.replace(/-/g, "/")).getTime() - new Date().getTime() > 0; //获取时间差
					var str = (val.isChangedOrder == 1) ? val.ticketState : "购票成功";
					if (flag) {
//						val.change = (val.isChangedOrder == 1 || message.isChangedOrder == 1) ? 2 : 1; //改签
						val.change = message.isChangedOrder == 1 ? 2 : 1; //改签
						(val.passengerType == 2) && (val.change = 0); //儿童不能改
						val.refund = 1; //退票
					} else {
						val.again = 1; ///重新预订
					};
					return str;
				} else {
					return val.ticketState;
				};
			},
			eventRefund(item){ //退票
				if(item.refund != 1) return;
				var param = {
					orderNum: item.order_num,
					orderType: this.message.order_type,
					passengerId: item.passengerId,
					ticketPrice: item.ticketPrice,
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/applyRefundTicketFee", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						this.refundMessage = res.data.Result;
						this.isRefundFlag = true;
						this.refundItem = item;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			eventChange(item){ //改签
				if(item.change != 1) return;
				var changePassenge = [];
				var passengers = this.message.passengers;
				if(!this.message.isChangedOrder) {
					passengers.forEach((val)=>{
						(this.message.order_type == 7) && (val.idType = val.idType + 1);
						(val.idCard == item.idCard) && changePassenge.push(val);
					},this);
					var changeMessage = {  //改签信息变量构建
						orderNo:this.message.orderNo,//订单号
						outOrderNo: this.message.outOrderNo || this.message.order_num,
						fromStation:this.message.fromStation,//出发站
						toStation:this.message.toStation,//到达站
						departDate:this.message.departureTime,//时间
						passenger:changePassenge,//改签乘客
						types:this.message.order_type,//订单类型
					};
					var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
					trainStore.changeMessage = changeMessage;//全局存储
					this.$store.commit('TRAINSTORE', trainStore);
					this.$router.push({//跳转改签
						name: 'trainChange',
						query: {
							fromStation: changeMessage.fromStation,
							toStation: changeMessage.toStation,
							departureDate: changeMessage.departDate,
						},
					});
				}
			},
			eventAgain(item){ //重新预订
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				trainStore.departureDate = new Date().format("yyyy-MM-dd");
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.push({
					name: 'trainList',
					query: {
						fromCity: this.message.fromStation,
						toCity: this.message.toStation,
						departureDate: new Date().format("yyyy-MM-dd"),
						Highspeed:false,
					},
				});
			},
			confirmRefund(){//确定退票
				var param = {
					method: "applyRefundOrder",
			        orderNum: this.refundItem.order_num,
					orderType: this.message.order_type,
					passengerId: this.refundItem.passengerId,
					orderNo: this.refundItem.orderNo,
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/applyRefundOrder", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						this.getOrder();
						this.isRefundFlag = false;
						this.refundItem = null;
						this.$toast("退票成功", {
							durtaion: 200,
							location: 'center',
						});
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			cancelRefund(){ //取消退票
				this.isRefundFlag = false;
			},
			wxOrderQuery(){ //微信订单查询
				var param = {
					flag:"12",
					openid:"",
					out_trade_no:this.orderNum,
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/create/wxOrderQuery", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						console.log(res);
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
				
			},
			wxOrderQuery(){ //微信订单查询
				this.$loading.show();
				var param = {
					flag:"12",
					openid:"",
					out_trade_no:this.orderNum,
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/create/wxOrderQuery", param).then((res) => {
					this.$loading.hide();
					(res.data.Code == "0") ? ((res.data.Result.trade_state == "SUCCESS") ? this.getOrderMessage() : this.$router.go(-2)) : this.$toast(res.data.msg, {
						durtaion: 200,
						location: 'center',
					});
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
		},
		filters: { //过滤
			multiTicketTime(ticketTime) {
				var arr = ticketTime.split(",");
				var list = [];
				arr.forEach((val) => {
					list.push(new Date(val.replace(/-/g, "/")).format("MM月dd日"))
				});
				return list.join("，");
			},
			multiTrainNo(trainNo) {
				return trainNo.replace(/\|/g, "，");
			},
			multiSeatClass(seatClass) {
				return seatClass.replace(/\|/g, "，");
			}
		},
		components: {
			trainHeader,
			trainlistdetails
		},
	};
</script>